<template>
  <div class="select-seat">
    <div class="seat-block">
      <div class="info-block">
        <div class="movie-name">{{moviemsg.moviename}}</div>
        <div class="movie-info">{{moviemsg.item.dt}} {{moviemsg.item.tm}} {{moviemsg.item.lang}}{{moviemsg.item.tp}}</div>
      </div>
      <div class="select-block">
        <div class="title-name-box">
          <div class="title-name">{{moviemsg.item.th}}</div>
        </div>

        <div class="seats-block">
          <div class="many-seats">
            <div class="row" v-for="(item,i) in list" :key="i">
              <div
                :class="['seats',{'green-seats':item1.id==2},{'white-seats':item1.id==1},{'red-seats':item1.id==0}]"
                v-for="(item1,j) in item"
                :key="j"
                @click="select(item1,i,j)"
              ></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="buy-block">
      <div class="cinema-info" v-if="this.msgCount === 0">
        <div class="seat-type-info">
          <span class="type-img">
            <img src="./SeatsImg/white.png" alt />
            <span>可选</span>
          </span>
          <span class="type-img">
            <img src="./SeatsImg/red.png" alt />
            <span>不可选</span>
          </span>
          <span class="type-img">
            <img src="./SeatsImg/green.png" alt />
            <span>已选</span>
          </span>
        </div>
      </div>

      <div class="selected-info">
        <div class="my-selected" v-for="(item,index) in msg" :key="index">
          <div class="selected-info">{{`${item.row}排${item.col}座`}}</div>
          <div class="selected-price">{{`￥${item.price}`}}</div>
        </div>
      </div>

      <div class="submit-block">
        <div class="submit" v-if="this.msgCount === 0">请先选座</div>
        <div class="submit real" v-else>
          <span @click="showPopup">￥{{allPrice|price}} 确认选座</span>
        </div>
      </div>
    </div>

    <van-popup v-model="showpop" position="bottom" :style="{ height: '45%' }" class="tanchu">
      <div class="movie-info">
        <div class="box-flex middle">
          <div class="title">{{moviemsg.moviename}}</div>
        </div>
        <div class="date">{{moviemsg.item.dt}} {{moviemsg.item.tm}} {{moviemsg.item.lang}}{{moviemsg.item.tp}}</div>
        <div class="local">{{moviemsg.cinemaname}}</div>
        <div class="seats">
          <div class="seat">{{moviemsg.item.th}}</div>&nbsp;&nbsp;
          <div class="seat" v-for="(item,index) in msg" :key="index">{{`${item.row}排${item.col}座`}}</div>
        </div>
      </div>
      <div class="movie-info msg">
        <div>手机号码</div>
        <div>{{user}}</div>
      </div>
      <div class="movie-info msg qian">
        <div>小计</div>
        <div class="money">
          ￥
          <span class="shuju">{{allPrice|price}}</span>
        </div>
      </div>
      <div class="qrzf" @click="zhifu">确认支付</div>
    </van-popup>
  </div>
</template>
<script>
export default {
  data: () => ({
    // 判断是否弹出
    phonenum: 0,
    showpop: false,
    list: '',
    user: '',
    // 0是有人选了
    // 1是可以选
    // 2是选中了
    // 已选座位数
    msgCount: 0,
    // 选座信息
    msg: [], // 里面存的是存放座位号的对象
    cinema: [
      {
        cinemaId: 10978,
        cinemaName: '华夏国际影城'
      }
    ],
    hall: {
      hallId: 61314,
      hallName: '3号厅'
    },
    movie: [
      {
        movieId: 1163219,
        movieName: '决战中途岛'
      }
    ],
    show: {
      dim: '2D',
      lang: '英语',
      showDate: '2019-11-13',
      showId: 6281,
      showTime: '10:05'
    },
    price: 0,
    allPrice: 0
  }),
  created () {
    this.list = this.$store.state.list
    console.log(this.$store.state.moviemsg)
    this.moviemsg = this.$store.state.moviemsg
    this.price = this.$store.state.moviemsg.item.vipPrice
    console.log(this.price)
    this.getUserName()
  },

  methods: {
    // 点击支付将座位状态变成0
    zhifu () {
      this.msg.forEach((el, index) => {
        this.list[el.row - 1][el.col - 1].id = 0
        this.$store.state.list = this.list
      })
      this.showpop = false
      this.$Toast('购买成功')
      this.msg = []
      this.msgCount = 0
      this.$router.push('/movie/hot')
    },
    showPopup () {
      this.showpop = true
    },
    select (data, x, y) {
      let seatsInfo = {}
      seatsInfo.price = this.price

      if (data.id === 1 && this.msgCount < 4) {
        this.msgCount++
        this.list[x][y].id = 2
        // this.list[x][y].flag = false // false之后不能选中了
        seatsInfo.row = x + 1
        seatsInfo.col = y + 1
        this.msg.push(seatsInfo)
      } else if (data.id === 2) {
        // 如果是选中状态,再点击的话
        this.msgCount--
        this.list[x][y].id = 1
        // this.list[x][y].flag = true
        for (let i = 0; i < this.msg.length; i++) {
          if (this.msg[i].row - 1 === x && this.msg[i].col === y) {
            this.msg.splice(i, 1)
          }
        }
        this.msg.splice(this.msgCount, 1)
      } else if (data.id === 0) {
        this.$Toast('此位置已经有人选了')
      } else {
        this.$Toast('每次最多选四个座位')
      }
      // 添加this.$forceUpdate();进行强制渲染，效果实现。搜索资料得出结果：因为数据层次太多，render函数没有自动更新，需手动强制刷新。
      this.$forceUpdate()
      this.getPrice()
    },
    getPrice () {
      // console.log(this.msg.length)
      this.allPrice = this.price * this.msg.length
    },
    getUserName () {
      var userList = JSON.parse(localStorage.getItem('users' || '[]'))
      this.user = userList[0].uname
      console.log(userList[0].uname)
    }
  },
  filters: {
    price (data) {
      var price = parseFloat(data)
      return price.toFixed(2)
    }
  }
}
</script>
<style lang="less" scoped>
.select-seat {
  position: relative;
  .seat-block {
    height: 369px;
    width: 100%;
    .info-block {
      font-size: 14px;
      width: 100%;
      height: 69px;
      // background: green;
      border-bottom: 1px solid #cccccc;
      line-height: 25px;
      .movie-name {
        font-weight: 700;
        padding-top: 10px;
      }
      .movie-info {
        font-size: 12px;
      }
    }
    .select-block {
      background-color: #f2f1f6;
      overflow: hidden;
      box-sizing: border-box;
      position: relative;
      margin-top: 0 !important;
      height: 434px;
      .title-name-box {
        font-size: 12px;
        position: absolute;
        width: 200px;
        text-align: center;
        z-index: 10;
        left: 23%;
        .title-name {
          display: inline-block;
          width: 200px;
          height: 18px;
          background: #e3e3e3;
          border-radius: 0 0 30px 30px;
          z-index: 99;
          margin: auto;
          // margin-left: 23%;
        }
      }

      .seats-block {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 200px;
        top: 88px;
        .many-seats {
          width: 700px;
          height: 365px;
        }
      }
    }
  }
  .buy-block {
    height: 130px;
    background: red;
  }
  //空白座位
  .white-seats {
    background: url('./SeatsImg/white.png') 0 0 no-repeat;
  }
  //有人选过的座位
  .red-seats {
    background: url('./SeatsImg/red.png') 0 0 no-repeat;
  }
  //当前选择的座位
  .green-seats {
    background: url('./SeatsImg/green.png') 0 0 no-repeat;
  }

  .seats {
    height: 20px;
    width: 20px;
    min-width: 10px;
    min-width: 10px;
    margin: 0;
    padding: 0;
    background-size: cover;
    margin-right: 0.8px;
  }
  .row {
    display: flex;
    width: 100%;
  }

  .buy-block {
    position: fixed;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    bottom: 51px;
    z-index: 999;
    background-color: #fff;
    .cinema-info {
      background-color: #f0f0f0;
      opacity: 0.8;
      font-size: 12px;
      .seat-type-info {
        text-align: center;
        padding: 2px 1px;
        .type-img {
          img {
            width: 12px;
            height: 12px;
            margin-right: 8px;
            margin-left: 8px;
            vertical-align: middle;
          }
        }
      }
    }
    .submit-block {
      padding: 10px;
      height: 5px;
      .submit {
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        font-weight: 700;
        text-align: center;
        color: #fff;
        border-radius: 5px;
        background-color: #ffddb2 !important;
      }
      .submit.real {
        background-color: #f90 !important;
      }
    }

    .selected-info {
      width: 100%;
      height: auto;
      .my-selected {
        font-size: 12px;
        position: relative;
        float: left;
        // background-image: url(…fPajuWSeqG5D6qO4d0PBEPCYkhYEWgVJpT2uZardbJ/wCEFUTZ6uJYOgAAAABJRU5ErkJggg==);
        width: 82px;
        height: 36px;
        background-size: cover;
        text-align: center;
      }
    }
  }

  .tanchu {
    .qian {
      margin-bottom: 20px;
    }
    .msg {
      display: flex;
      justify-content: space-between;
      .money {
        color: #f34d41;
        .shuju {
          font-size: 18px;
        }
      }
    }
    .movie-info {
      background-color: #fff;
      padding: 15px 15px 15px 0;
      margin-left: 15px;
      line-height: 1;
      color: #333;
      font-size: 15px;
      border-bottom: 1px solid #ccc;
      .date {
        font-size: 14px;
        line-height: 20px;
        margin: 7px 0;
        color: #f34d41;
      }
      .local {
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 7px;
      }
      .seats {
        font-size: 14px;
        line-height: 20px;
        display: inline;
        .seat {
          display: inline-block;
          margin-right: 5px;
        }
      }
    }
    .qrzf {
      margin: 0 auto;
      width: 90%;
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      font-weight: 700;
      text-align: center;
      color: #fff;
      border-radius: 5px;
      background-color: #f90;
    }
  }
}
</style>
